<template>
    <!-- 收藏 item -->
    <div class="search-item">
        <div class="header">
            <div 
            class="title" 
            @click="handleClick"
            >
                {{title}} 

                <slot name="tag"></slot>
            </div>

            <div class="time-and-icon">
                <slot name="time">
                    {{(new Date(time)).pattern("yyyy-MM-dd HH:mm:ss") | dateFormat}}
                </slot>

                &nbsp;&nbsp;&nbsp;

                <slot name="icon">
                    <collect-star
                        :data="{objectguid: data.guid, objectname: data.notice, objecttype: noticeCollType(data.noticetype), marktype: 'collect',}"
                        :defaultVal="data.bj === '1'"
                    ></collect-star>
                </slot>
            </div>
        </div>

        <div class="body">
            <slot name="content"></slot>
        </div>

        <div class="footer">
            <div class="left">
                <div class="tags" v-if="tagList">
                    <el-tag 
                    v-for="item in tagList" 
                    :key="item[tagName]"
                    :type="item[tagType] == 'money'? '' : 'info'" 
                    size="mini"
                    >
                        {{item[tagName]}}
                    </el-tag>

                    <div 
                    class="tag-after"
                    >
                        <slot name="tag-after"></slot>
                    </div>
                </div>

                <slot name="footer-left"></slot>
            </div>

            <div class="right">
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>

<script>
import app from '@js/app-node';

import notice from '@/mixins/notice.js';

import TOOLBAR_MIXIN from '@components/sys/item-tool-bar/mixins/index';
import CollectStar from '@components/sys/collect.vue';

export default {
    mixins: [TOOLBAR_MIXIN, notice],
    components: {
        CollectStar,
    },
    props: {
        data: {
            type: Object,
            default: (() => {})
        },
        title: {
            type: String,
            default: ""
        },
        time: {
            type: [String,Number],
            default: ""
        },
        tagList:{
            type: [Array,String,Boolean],
            default:false
        },
        tagName:{
            type: String,
            default: ""
        },
        type:{
            type: String,
            default: ""
        },
        tagType:{
            type: String,
            default: ""
        },
    },
    data() {
        return {
            
        };
    },
    filters: {
        dateFormat(time) {
            // time = '2019/08/01 09:40:00';
            if(!time) return;

            var oldtime;
            
            if(app.getType(time) === 'string') {
                time = time.replace(/\-/g, '/');
                oldtime = new Date(time);
            } else {
                oldtime = time;
            }

            var now = new Date(),
                delta = 0,
                oldtime_s,
                now_s;

            oldtime_s = oldtime.getTime();
            now_s = now.getTime();
            delta = now_s - oldtime_s;

            if(delta / (1000 * 60 * 60) < 1) {
                //小于1h；
                return Math.ceil(delta / (1000 * 60)) + '分钟前';
            } else if(delta / (1000 * 60 * 60 * 24) < 1) {
                //小于1天
                return Math.ceil(delta / (1000 * 60 * 60)) + '小时前';
            } else if(delta / (1000 * 60 * 60 * 24 * 7) < 1) {
                //小于7天
                return Math.ceil(delta / (1000 * 60 * 60 * 24)) + '天前';
            } else if(oldtime.getFullYear() === now.getFullYear()) {
                //同年
                return oldtime.Format('MM-dd');
            } else {
                return oldtime.Format('yyyy-MM-dd');
            }
        },
    },
    methods: {
        handleClick(){
            this.$emit('titleClick',this.data)
        },
        collectClick (val) {
            this.$emit('setCollect',val)
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss';    

.search-item{
    .header{
        display: flex;
        align-items: center;
        margin-bottom: 8px;

        .title {
            flex: 1;
            font-weight: 600;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;

            &:hover{
                color: $primaryColor;
            }
        }

        .time-and-icon {
            display: flex;
            align-items: center;
            color: $infoColor;

            .iconfont {
                cursor: pointer;
            }
        }
    }

    .footer {
        display: flex;

        .left{
            flex: 1;

            .tags {
                margin-top: 15px;
                display: flex;
                justify-content: flex-start;
                align-items:baseline;

                .tag-after {
                    margin-left: 10px;
                }

                .el-tag {
                    margin-left: 10px;

                    &:first-child{
                        margin-left: 0;
                    }
                }
            }
        }

        .right{

        }
    }

}
</style>